<template>
	<el-dialog title="重命名" :modal-append-to-body="false" :visible.sync="renameVisible" width="360px">
		<div class="rename-content">
			<span class="rename-title">请输入名称</span>
			<el-input class="rename-input" v-model="folderForm.name"></el-input>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="renameVisible = false">取 消</el-button>
			<el-button type="primary" @click="updateClick">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import {
		update
	} from "@/api/dir.js"
	export default{
		data(){
			return{
			   renameVisible:false,
			   folderForm: {
			   	name: '',
			   	dirId:''
			   }
			}
		},
		props: {
			treeData: {
				type: Object,
				default: null
			},
		},
		methods:{
			// 修改文件名
			updateClick(){
				var _this = this
				_this.folderForm.dirId = _this.treeData.id
				if(!this.folderForm.name){
					this.$message.error('请输入文件名称');
					return;
				}
				update(_this.folderForm).then(res=>{
					_this.renameVisible = false
					_this.updateTree(res.data)
					_this.$message({
						showClose: true,
						message: '操作成功',
						type: 'success'
					});
				})
			},
			// 更新树
			updateTree(data){
				this.$emit('updateTree',data)
			},
			loadRename() {
				this.renameVisible = true
			}
		}
	}
</script>

<style scoped>
	.rename-content{
		display: flex;
		flex-direction: column;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.rename-title{
		font-size: 14px;
		font-weight: 700;
		color: #2e405e;
		margin-bottom: 10px;
		display: block;
	}

	.rename-input{
		flex: 1;
	}

	/deep/.el-dialog .el-dialog__footer{
		border-color: white;
	}

	/deep/.el-dialog__title{
		font-weight: bold;
		font-size: 16px;
	}
</style>
